ஜாவாஸ்கிரிப்ட் பண்டல் ஆப்டிமைசேஷன் உத்தி: மேம்பட்ட கோட் ஸ்பிளிட்டிங் நுட்பங்கள்

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Products = lazy(() => import('./pages/Products'));

function App() {
  return (
    
      Loading...

இந்த எடுத்துக்காட்டில், `Home`, `About`, மற்றும் `Products` கூறுகள் `React.lazy()` ஐப் பயன்படுத்தி டைனமிக்காக ஏற்றப்படுகின்றன. `Suspense` கூறு, கூறுகள் ஏற்றப்படும்போது ஒரு பின்னடைவு UI (ஏற்றுதல் காட்டி) ஐ வழங்குகிறது. இது கோட் பதிவிறக்கத்திற்காக காத்திருக்கும்போது பயனர் வெற்றுத் திரையைப் பார்ப்பதில்லை என்பதை உறுதி செய்கிறது. இந்த பக்கங்கள் இப்போது தனித்தனி துண்டுகளாகப் பிரிக்கப்பட்டு, தொடர்புடைய வழித்தடங்களுக்குச் செல்லும்போது மட்டுமே ஏற்றப்படுகின்றன.

மேம்பட்ட கோட் ஸ்பிளிட்டிங் நுட்பங்கள்

அடிப்படை கோட் ஸ்பிளிட்டிங் வகைகளுக்கு அப்பால், பல மேம்பட்ட நுட்பங்கள் உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களை மேலும் மேம்படுத்த முடியும்.

1. வெண்டர் ஸ்பிளிட்டிங் (Vendor Splitting)

வெண்டர் ஸ்பிளிட்டிங் என்பது மூன்றாம் தரப்பு நூலகங்களை (எ.கா., ரியாக்ட், ஆங்குலர், Vue.js) ஒரு தனி பண்டலாகப் பிரிப்பதை உள்ளடக்கியது. இந்த நூலகங்கள் உங்கள் பயன்பாட்டுக் கோடை ஒப்பிடும்போது அடிக்கடி மாறும் வாய்ப்பு குறைவாக இருப்பதால், உலாவியால் அவற்றை மிகவும் திறம்பட கேச் செய்ய முடியும்.

உதாரணம் (Webpack):

module.exports = {
  // ... other configurations
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

இந்த Webpack உள்ளமைவு `node_modules` கோப்பகத்தில் உள்ள அனைத்து கோடையும் கொண்ட `vendors.bundle.js` என்ற தனி பண்டலை உருவாக்குகிறது.

2. பொதுவான துண்டு பிரித்தெடுத்தல் (Common Chunk Extraction)

பொதுவான துண்டு பிரித்தெடுத்தல் என்பது பல பண்டல்களுக்கு இடையில் பகிரப்படும் கோடை அடையாளம் கண்டு, பகிரப்பட்ட கோடை கொண்ட ஒரு தனி பண்டலை உருவாக்குகிறது. இது தேவையற்றதை குறைத்து, கேச்சிங் திறனை மேம்படுத்துகிறது.

உதாரணம் (Webpack):

module.exports = {
  // ... other configurations
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000, // Minimum size, in bytes, for a chunk to be created.
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading.
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point.
      automaticNameDelimiter: '~',
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2, // Minimum number of chunks that must share a module before splitting.
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

இந்த உள்ளமைவு குறிப்பிட்ட அளவுகோல்களின் (எ.கா., `minChunks`, `minSize`) அடிப்படையில் பொதுவான துண்டுகளை தானாகவே பிரித்தெடுக்கும்.

3. வழித்தட ப்ரீஃபெட்சிங் மற்றும் ப்ரீலோடிங் (Route Prefetching and Preloading)

ப்ரீஃபெட்சிங் மற்றும் ப்ரீலோடிங் என்பவை பயனரின் எதிர்கால செயல்களை எதிர்பார்த்து, வளங்களை முன்கூட்டியே ஏற்றுவதற்கான நுட்பங்களாகும். ப்ரீஃபெட்சிங் உலாவி செயலற்ற நிலையில் இருக்கும்போது பின்னணியில் வளங்களைப் பதிவிறக்குகிறது, அதேசமயம் ப்ரீலோடிங் தற்போதைய பக்கத்திற்கு அவசியமான குறிப்பிட்ட வளங்களை ஏற்றுவதற்கு முன்னுரிமை அளிக்கிறது.

ப்ரீஃபெட்சிங் உதாரணம்:

இந்த HTML குறிச்சொல், உலாவி செயலற்ற நிலையில் இருக்கும்போது `about.bundle.js` கோப்பை ப்ரீஃபெட்ச் செய்யும்படி உலாவிக்கு அறிவுறுத்துகிறது. இது About பக்கத்திற்குச் செல்வதை கணிசமாக வேகப்படுத்தும்.

ப்ரீலோடிங் உதாரணம்:

இந்த HTML குறிச்சொல் `critical.bundle.js` ஐ ஏற்றுவதற்கு முன்னுரிமை அளிக்குமாறு உலாவிக்கு அறிவுறுத்துகிறது. பக்கத்தின் ஆரம்ப ரெண்டரிங்கிற்கு அவசியமான கோடை ஏற்றுவதற்கு இது பயனுள்ளதாக இருக்கும்.

4. ட்ரீ ஷேக்கிங் (Tree Shaking)

ட்ரீ ஷேக்கிங் என்பது உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களில் இருந்து டெட் கோடை (பயன்படுத்தப்படாத கோட்) அகற்றுவதற்கான ஒரு நுட்பமாகும். இது பயன்படுத்தப்படாத செயல்பாடுகள், மாறிகள் மற்றும் மாட்யூல்களைக் கண்டறிந்து நீக்குகிறது, இதன் விளைவாக சிறிய பண்டல் அளவுகள் கிடைக்கின்றன. Webpack மற்றும் Rollup போன்ற பண்டலர்கள் ட்ரீ ஷேக்கிங்கை இயல்பாகவே ஆதரிக்கின்றன.

ட்ரீ ஷேக்கிங்கிற்கான முக்கியக் கருத்தில் கொள்ள வேண்டியவை:

• ES மாட்யூல்களை (ESM) பயன்படுத்தவும்: ட்ரீ ஷேக்கிங், எந்தக் கோட் பயன்படுத்தப்படவில்லை என்பதைத் தீர்மானிக்க, ES மாட்யூல்களின் நிலையான கட்டமைப்பை (`import` மற்றும் `export` அறிக்கைகளைப் பயன்படுத்தி) நம்பியுள்ளது.
• பக்க விளைவுகளைத் தவிர்க்கவும்: பக்க விளைவுகள் என்பது செயல்பாட்டின் எல்லைக்கு வெளியே செயல்களைச் செய்யும் கோட் ஆகும் (எ.கா., குளோபல் மாறிகளை மாற்றுவது). பக்க விளைவுகள் கொண்ட கோடை ட்ரீ ஷேக் செய்வதில் பண்டலர்களுக்கு சிரமம் ஏற்படலாம்.
• `package.json` இல் `sideEffects` பண்பைப் பயன்படுத்தவும்: உங்கள் `package.json` கோப்பில் `sideEffects` பண்பைப் பயன்படுத்தி உங்கள் பேக்கேஜில் உள்ள எந்தெந்த கோப்புகளில் பக்க விளைவுகள் உள்ளன என்பதை நீங்கள் வெளிப்படையாக அறிவிக்கலாம். இது ட்ரீ ஷேக்கிங்கை மேம்படுத்த பண்டலருக்கு உதவுகிறது.

5. கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு வெப் வொர்க்கர்களைப் பயன்படுத்துதல்

வெப் வொர்க்கர்கள் ஜாவாஸ்கிரிப்ட் கோடை ஒரு பின்னணித் திரெட்டில் இயக்க அனுமதிக்கின்றன, இது பிரதான திரெட் தடுக்கப்படுவதைத் தடுக்கிறது. பட செயலாக்கம், தரவு பகுப்பாய்வு அல்லது சிக்கலான கணக்கீடுகள் போன்ற கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும். இந்தப் பணிகளை ஒரு வெப் வொர்க்கருக்கு மாற்றுவதன் மூலம், உங்கள் பயனர் இடைமுகத்தை பதிலளிக்கக்கூடியதாக வைத்திருக்க முடியும்.

உதாரணம்:

// main.js
const worker = new Worker('worker.js');

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

worker.postMessage({ data: 'some data for processing' });

// worker.js
self.onmessage = (event) => {
  const data = event.data.data;
  // Perform computationally intensive task
  const result = processData(data);
  self.postMessage(result);
};

function processData(data) {
  // ... your processing logic
  return 'processed data';
}

6. மாட்யூல் ஃபெடரேஷன் (Module Federation)

Webpack 5 இல் கிடைக்கும் மாட்யூல் ஃபெடரேஷன், இயக்க நேரத்தில் வெவ்வேறு பயன்பாடுகளுக்கு இடையில் கோடைப் பகிர உங்களை அனுமதிக்கிறது. இது மைக்ரோ-ஃபிரண்ட்எண்ட்களை உருவாக்கவும், மற்ற பயன்பாடுகளிலிருந்து மாட்யூல்களை டைனமிக்காக ஏற்றவும் உதவுகிறது, இது ஒட்டுமொத்த பண்டல் அளவைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது.

உதாரணம்:

உங்களிடம் `app1` மற்றும் `app2` என இரண்டு பயன்பாடுகள் இருப்பதாக வைத்துக்கொள்வோம். `app1` இலிருந்து ஒரு பட்டன் கூறினை `app2` உடன் பகிர விரும்புகிறீர்கள்.

app1 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.js'
      }
    })
  ]
};

app2 (webpack.config.js):

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3000/remoteEntry.js'
      }
    })
  ]
};

`app2` இல், நீங்கள் இப்போது `app1` இலிருந்து பட்டன் கூறினை இம்போர்ட் செய்து பயன்படுத்தலாம்:

import Button from 'app1/Button';

கோட் ஸ்பிளிட்டிங்கிற்கான கருவிகள் மற்றும் நூலகங்கள்

பல கருவிகள் மற்றும் நூலகங்கள் உங்கள் திட்டங்களில் கோட் ஸ்பிளிட்டிங்கை செயல்படுத்த உதவும்:

• Webpack: நுழைவு புள்ளி ஸ்பிளிட்டிங், டைனமிக் இம்போர்ட்ஸ், மற்றும் வெண்டர் ஸ்பிளிட்டிங் உள்ளிட்ட பல்வேறு கோட் ஸ்பிளிட்டிங் நுட்பங்களை ஆதரிக்கும் ஒரு சக்திவாய்ந்த மற்றும் பல்துறை மாட்யூல் பண்டலர்.
• Rollup: ட்ரீ ஷேக்கிங்கில் சிறந்து விளங்கும் மற்றும் மிகவும் மேம்படுத்தப்பட்ட பண்டல்களை உருவாக்கும் ஒரு மாட்யூல் பண்டலர்.
• Parcel: குறைந்தபட்ச அமைப்புடன் கோட் ஸ்பிளிட்டிங்கை தானாகவே கையாளும் ஒரு ஜீரோ-கான்ஃபிகரேஷன் பண்டலர்.
• React.lazy: டைனமிக் இம்போர்ட்ஸைப் பயன்படுத்தி கூறுகளை சோம்பேறித்தனமாக ஏற்றுவதற்கான ஒரு உள்ளமைக்கப்பட்ட ரியாக்ட் API.
• Loadable Components: ரியாக்ட்டில் கோட் ஸ்பிளிட்டிங்கிற்கான ஒரு உயர்-வரிசை கூறு.

கோட் ஸ்பிளிட்டிங்கிற்கான சிறந்த நடைமுறைகள்

கோட் ஸ்பிளிட்டிங்கை திறம்பட செயல்படுத்த, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• உங்கள் பயன்பாட்டைப் பகுப்பாய்வு செய்யுங்கள்: பெரிய கூறுகள், அடிக்கடி பயன்படுத்தப்படாத அம்சங்கள், அல்லது வழித்தடம் சார்ந்த எல்லைகள் ஆகியவற்றில் கவனம் செலுத்தி, கோட் ஸ்பிளிட்டிங் மிக முக்கியமான தாக்கத்தை ஏற்படுத்தக்கூடிய பகுதிகளை அடையாளம் காணுங்கள்.
• செயல்திறன் வரம்புகளை அமைக்கவும்: உங்கள் இணையதளத்திற்கான செயல்திறன் இலக்குகளை வரையறுக்கவும், அதாவது இலக்கு ஏற்றுதல் நேரங்கள் அல்லது பண்டல் அளவுகள், மற்றும் உங்கள் கோட் ஸ்பிளிட்டிங் முயற்சிகளை வழிநடத்த இந்த வரம்புகளைப் பயன்படுத்தவும்.
• செயல்திறனைக் கண்காணிக்கவும்: கோட் ஸ்பிளிட்டிங்கை செயல்படுத்திய பிறகு உங்கள் இணையதளத்தின் செயல்திறனைக் கண்காணிக்கவும், அது விரும்பிய முடிவுகளைத் தருகிறதா என்பதை உறுதிப்படுத்தவும். செயல்திறன் அளவீடுகளை அளவிட Google PageSpeed Insights, WebPageTest, அல்லது Lighthouse போன்ற கருவிகளைப் பயன்படுத்தவும்.
• கேச்சிங்கை மேம்படுத்துங்கள்: அடுத்தடுத்த வருகைகளின் போது பயனர்கள் கோடை பதிவிறக்கம் செய்ய வேண்டிய அவசியத்தைக் குறைக்க ஜாவாஸ்கிரிப்ட் பண்டல்களை சரியாக கேச் செய்ய உங்கள் சேவையகத்தை உள்ளமைக்கவும். பயனர்கள் எப்போதும் கோடின் சமீபத்திய பதிப்பைப் பெறுவதை உறுதிசெய்ய கேச்-பஸ்டிங் நுட்பங்களைப் (எ.கா., கோப்புப்பெயரில் ஒரு ஹாஷைச் சேர்ப்பது) பயன்படுத்தவும்.
• உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்தவும்: உலகெங்கிலும் உள்ள பயனர்களுக்கு ஏற்றுதல் நேரங்களை மேம்படுத்த உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களை ஒரு CDN முழுவதும் விநியோகிக்கவும்.
• பயனர் புள்ளிவிவரங்களைக் கருத்தில் கொள்ளுங்கள்: உங்கள் இலக்கு பார்வையாளர்களின் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப உங்கள் கோட் ஸ்பிளிட்டிங் உத்தியை வடிவமைக்கவும். உதாரணமாக, உங்கள் பயனர்களில் கணிசமான பகுதியினர் மெதுவான இணைய இணைப்புகளில் இருந்தால், நீங்கள் கோட் ஸ்பிளிட்டிங்கில் மிகவும் தீவிரமாக இருக்க வேண்டியிருக்கும்.
• தானியங்கு பண்டல் பகுப்பாய்வு: உங்கள் பண்டல் அளவுகளைக் காட்சிப்படுத்தவும், மேம்படுத்துவதற்கான வாய்ப்புகளை அடையாளம் காணவும் Webpack Bundle Analyzer போன்ற கருவிகளைப் பயன்படுத்தவும்.

நிஜ உலக உதாரணங்கள் மற்றும் வழக்கு ஆய்வுகள்

பல நிறுவனங்கள் தங்கள் இணையதள செயல்திறனை மேம்படுத்த கோட் ஸ்பிளிட்டிங்கை வெற்றிகரமாக செயல்படுத்தியுள்ளன. இதோ சில உதாரணங்கள்:

• கூகிள்: கூகிள் தனது ஜிமெயில் மற்றும் கூகிள் மேப்ஸ் உள்ளிட்ட வலைப் பயன்பாடுகளில் வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்க கோட் ஸ்பிளிட்டிங்கை விரிவாகப் பயன்படுத்துகிறது.
• பேஸ்புக்: பேஸ்புக் அதன் பல்வேறு அம்சங்கள் மற்றும் கூறுகளின் ஏற்றத்தை மேம்படுத்த கோட் ஸ்பிளிட்டிங்கைப் பயன்படுத்துகிறது, பயனர்கள் தங்களுக்குத் தேவையான கோடை மட்டுமே பதிவிறக்கம் செய்வதை உறுதி செய்கிறது.
• நெட்ஃபிக்ஸ்: நெட்ஃபிக்ஸ் தனது வலைப் பயன்பாட்டின் தொடக்க நேரத்தை மேம்படுத்த கோட் ஸ்பிளிட்டிங்கைப் பயன்படுத்துகிறது, பயனர்கள் உள்ளடக்கத்தை விரைவாக ஸ்ட்ரீம் செய்ய அனுமதிக்கிறது.
• பெரிய இ-காமர்ஸ் தளங்கள் (அமேசான், அலிபாபா): இந்த தளங்கள் தயாரிப்பு பக்க ஏற்றுதல் நேரங்களை மேம்படுத்த கோட் ஸ்பிளிட்டிங்கைப் பயன்படுத்துகின்றன, இது உலகளவில் மில்லியன் கணக்கான பயனர்களுக்கு ஷாப்பிங் அனுபவத்தை மேம்படுத்துகிறது. பயனர் தொடர்புகளின் அடிப்படையில் தயாரிப்பு விவரங்கள், தொடர்புடைய பொருட்கள் மற்றும் பயனர் மதிப்புரைகளை அவை டைனமிக்காக ஏற்றுகின்றன.

இந்த எடுத்துக்காட்டுகள் இணையதள செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துவதில் கோட் ஸ்பிளிட்டிங்கின் செயல்திறனை நிரூபிக்கின்றன. கோட் ஸ்பிளிட்டிங்கின் கொள்கைகள் பல்வேறு பிராந்தியங்கள் மற்றும் இணைய அணுகல் வேகங்களில் உலகளவில் பொருந்தக்கூடியவை. மெதுவான இணைய இணைப்புகள் உள்ள பகுதிகளில் செயல்படும் நிறுவனங்கள், தீவிரமான கோட் ஸ்பிளிட்டிங் உத்திகளை செயல்படுத்துவதன் மூலம் மிக முக்கியமான செயல்திறன் மேம்பாடுகளைக் காணலாம்.

முடிவுரை

கோட் ஸ்பிளிட்டிங் என்பது ஜாவாஸ்கிரிப்ட் பண்டல்களை மேம்படுத்துவதற்கும் இணையதள செயல்திறனை மேம்படுத்துவதற்கும் ஒரு முக்கியமான நுட்பமாகும். உங்கள் பயன்பாட்டின் கோடை சிறிய, நிர்வகிக்கக்கூடிய துண்டுகளாகப் பிரிப்பதன் மூலம், ஆரம்ப ஏற்றுதல் நேரங்களைக் குறைக்கலாம், பயனர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் கேச்சிங் திறனை அதிகரிக்கலாம். கோட் ஸ்பிளிட்டிங்கின் வெவ்வேறு வகைகளைப் புரிந்துகொண்டு சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் வலைப் பயன்பாடுகளின் செயல்திறனை கணிசமாக மேம்படுத்தலாம் மற்றும் உங்கள் பயனர்களுக்கு சிறந்த அனுபவத்தை வழங்கலாம்.

வலைப் பயன்பாடுகள் பெருகிய முறையில் சிக்கலானதாக மாறும்போது, கோட் ஸ்பிளிட்டிங் இன்னும் முக்கியத்துவம் வாய்ந்ததாக மாறும். சமீபத்திய கோட் ஸ்பிளிட்டிங் நுட்பங்கள் மற்றும் கருவிகளில் புதுப்பித்த நிலையில் இருப்பதன் மூலம், உங்கள் இணையதளங்கள் செயல்திறனுக்காக மேம்படுத்தப்பட்டிருப்பதையும், உலகெங்கிலும் ஒரு தடையற்ற பயனர் அனுபவத்தை வழங்குவதையும் உறுதிசெய்ய முடியும்.